<template>
  <div class="food-display">
    <button class="upload-button" @click="toggleFoodForm">{{ showFoodForm ? '取消上传' : '上传美食' }}</button>
    <!-- <food-form v-if="showFoodForm" :visible.sync="showFoodForm"></food-form> -->
    <h1>食品陈列</h1>
    <!-- 搜索行 -->
    <div class="search-row">
      <input type="text" v-model="searchKey" class="search-input" placeholder="搜索食品">
      <button class="search-button" @click="searchByKey">搜索</button>
    </div>
    
    
    <!-- 排序行 -->
    <div class="sort-row">
      <button class="sort-button" @click="sortFoodsByLikes">按点赞数排序</button>
      <button class="sort-button" @click="sortFoodsByCollect">按收藏数排序</button>
      <button class="sort-button" @click="sortFoodsByReview">按评论数排序</button>
    </div>
    <div class="food-items" style="display: flex; flex-wrap: wrap;">
      <div class="food-item" v-for="(food,i) in foods" :key="i" style="width: calc(25% - 20px); margin: 10px;">
        <img v-bind:src="food.image" :alt="food.name" class="food-image" style=" border-radius: 5px;">
        <h3 class="food-name">{{ food.name }}</h3>
        <p class="food-description">{{ food.content }}</p>
        <button class="view-details" @click="viewFoodDetail(food)">查看详情</button>
        <button class="like-button" @click="toggleLike(i)">
          <img v-bind:src="likeIcon(food.objectid)" alt="点赞" class="like-icon">
          <span class="like-count">{{ likesTotal[food.objectid] }}</span>
        </button>
        <button class="collect-button" @click="toggleCollect(i)">
          <img v-bind:src="likeCollect(food.objectid)" alt="收藏" class="collect-icon">
          <span class="like-count">{{ collectTotal[food.objectid] }}</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import Vue from 'vue';
axios.defaults.baseURL="http://localhost:8087"

export default {
 
  data() {
    return {
      id:this.$route.query,
      isCollect:false,
      foods: [],
      likesTotal:[],
      collectTotal:[],
      reviewTotal:[],
      likes:[],
      collect:[],
      review:[],
      showFoodForm: false,
      searchKey:"",
      collectSort:false,
      likesSort:false,
      reviewSort:false
    };
  },
  created()
  {
    console.log("created")
    console.log(this.id)
    if(typeof this.id == 'string')
    {
      this.isCollect=true
    }
    else{
      this.isCollect=false
    }
    this.init()
  },
  
  methods: {
    init()
    {
      let userid=sessionStorage.getItem("userid")
      let str=null
      if(this.isCollect)
      {
        str=`/findObjectByCollect/${this.id}&&1&&${this.searchKey}`
      }else
      {
        str=`/findObject/1`
      }
      axios.get(str).then(res=>{
      Vue.set(this,'foods',res.data)
      // this.foods=res.data
      for(let i=0;i<this.foods.length;++i)
      {
        
        axios.get(`/findLikes_total/${this.foods[i].type}&&${this.foods[i].objectid}`).then(res=>{
          // this.likesTotal[this.foods[i].objectid]=(res.data.likesTotal)
          Vue.set(this.likesTotal,this.foods[i].objectid,res.data.likesTotal)
        })
        axios.get(`/findCollect_total/${this.foods[i].type}&&${this.foods[i].objectid}`).then(res=>{
          // this.collectTotal[this.foods[i].objectid]=(res.data.collectTotal)
          Vue.set(this.collectTotal,this.foods[i].objectid,res.data.collectTotal)
        })
        axios.get(`/findReview_total/${this.foods[i].type}&&${this.foods[i].objectid}`).then(res=>{
          // this.reviewTotal[this.foods[i].objectid]=(res.data.reviewTotal)
          Vue.set(this.reviewTotal,this.foods[i].objectid,res.data.reviewTotal)
        })
        if(userid)
        {
          axios.post(`/findIfLikes?likesid=`+userid+`&type=1&objectid=`+this.foods[i].objectid).then(res=>{
          if(res.data){
            Vue.set(this.likes,this.foods[i].objectid,true)
            // this.likes[this.foods[i].objectid]=true
            console.log(res.data)
          }else{
            Vue.set(this.likes,this.foods[i].objectid,false)
            // this.likes[this.foods[i].objectid]=false
            console.log(res.data)
          }
          })
          axios.post(`/findIfCollect?collectid=`+userid+`&type=1&objectid=`+this.foods[i].objectid).then(res=>{
            if(res.data){
              Vue.set(this.collect,this.foods[i].objectid,true)
              // this.collect[this.foods[i].objectid]=true
              console.log(res.data)
            }else{
              Vue.set(this.collect,this.foods[i].objectid,false)
              // this.collect[this.foods[i].objectid]=false
              console.log(res.data)
            }
          })
        }
      }
    })
    },
    searchByKey(){
      let key=this.searchKey
      let type=1;
      let str=null
      if(this.isCollect)
        str=`/findObjectByCollect/${this.id}&&1&&${key}`
      else
        str=`/findObjectByKey/${key}&&${type}`
      axios.get(str).then(res=>{
        Vue.set(this, 'foods', res.data)
      })
    },
    sortFoodsByCollect(){
      //true 升序 false 降序
      let key=this.searchKey
      console.log(this.collectSort)
      let str=null
      if(this.isCollect)
        str=`/findObjectByCollectSortCollectAsc/${this.id}&&1&&${key}`
      else 
        str=`/findObjectByKeySortCollectAsc/${key}&&1`
      if(this.collectSort){
        axios.get(str).then(res=>{
          Vue.set(this, 'foods', res.data)
        })
      }else{
        str=str.replace("Asc","Desc")
        axios.get(str).then(res=>{
          Vue.set(this, 'foods', res.data)
        })
      }
      this.collectSort=!this.collectSort
    },
    sortFoodsByLikes(){
      let key=this.searchKey
      let str=null
      if(this.isCollect)
        str=`/findObjectByCollectSortLikesAsc/${this.id}&&1&&${key}`
      else 
        str=`/findObjectByKeySortLikesAsc/${key}&&1`
      if(this.likesSort){
        axios.get(str).then(res=>{
          Vue.set(this, 'foods', res.data)
        })
      }else{
        str=str.replace("Asc","Desc")
        axios.get(str).then(res=>{
          Vue.set(this, 'foods', res.data)
        })
      }
      this.likesSort=!this.likesSort
    },
    sortFoodsByReview(){
      let key=this.searchKey
      let str=null
      if(this.isCollect)
        str=`/findObjectByCollectSortReviewAsc/${this.id}&&1&&${key}`
      else 
        str=`/findObjectByKeySortReviewAsc/${key}&&1`
      if(this.reviewSort){
        axios.get(str).then(res=>{
          Vue.set(this, 'foods', res.data)
        })
      }else{
        str=str.replace("Asc","Desc")
        axios.get(str).then(res=>{
          Vue.set(this, 'foods', res.data)
        })
      }
      this.reviewSort=!this.reviewSort
    },
    toggleLike(i) {
      let userid=sessionStorage.getItem("userid")
      if(userid)
      {
        Vue.set(this.likes, this.foods[i].objectid, !this.likes[this.foods[i].objectid])
        // this.likes[i]=!this.likes[i]
        // console.log(this.likes[i])
        if(this.likes[this.foods[i].objectid])
        {
          axios.post("/insertlikes?likesid="+userid+`&type=1&objectid=`+this.foods[i].objectid).then(res=>{
            Vue.set(this.likesTotal,this.foods[i].objectid,this.likesTotal[this.foods[i].objectid]+1)
            console.log(res.data)
          })
        }else{
          axios.delete("/deletelikes?likesid="+userid+`&type=1&objectid=`+this.foods[i].objectid).then(res=>{
            Vue.set(this.likesTotal,this.foods[i].objectid,this.likesTotal[this.foods[i].objectid]-1)
            console.log(res.data)
          })
        }
        
      }else{
        alert("请先登录");
        this.$router.push({
                name:'login'
                
            })
      }
    },
    toggleCollect(i) {
      let userid=sessionStorage.getItem("userid")
      if(userid)
      {
        Vue.set(this.collect, this.foods[i].objectid, !this.collect[this.foods[i].objectid])
        // this.likes[i]=!this.likes[i]
        // console.log(this.collect[i])
        if(this.collect[this.foods[i].objectid])
        {
          axios.post("/insertcollect?collectid="+userid+`&type=1&objectid=`+this.foods[i].objectid).then(res=>{
            Vue.set(this.collectTotal,this.foods[i].objectid,this.collectTotal[this.foods[i].objectid]+1)
            console.log(res.data)
          })
        }else{
          axios.delete("/deletecollect?collectid="+userid+`&type=1&objectid=`+this.foods[i].objectid).then(res=>{
            Vue.set(this.collectTotal,this.foods[i].objectid,this.collectTotal[this.foods[i].objectid]-1)
            console.log(res.data)
          })
        }
        
      }else{
        alert("请先登录");
        this.$router.push({
                name:'login'
                
            })
      }
      
    },
    likeIcon(i) {
      return this.likes[i]  ? require('../assets/like.png') :require('../assets/unlike.png');
    },
    likeCollect(i) {
      return this.collect[i]  ? require('../assets/collect.png') :require('../assets/discollect.png');
    },
    viewFoodDetail(food) {
      // 使用food对象跳转到FoodDetail组件
      this.$router.push({
                name:'fooddetail',
                query:food
            })

    },
    //创建上传表单
    toggleFoodForm() {
      this.showFoodForm = !this.showFoodForm;
      if(this.showFoodForm){
        this.$router.push({
                name:'foodform'
            })
      }
    }
  }
};
</script>

<style scoped>
/* ... 之前的样式 ... */

.like-button {
  cursor: pointer;
  border: none;
  background: none;
  padding: 10px;
  margin-top: 10px;
}
.food-image{
  width: 300px;
  height: 250px;
}
.like-icon {
  width: 20px;
  height: 20px;
}

.like-count {
  margin-left: 5px;
  font-size: 12px;
  color: black;
}

.collect-button {
  cursor: pointer;
  border: none;
  background: none;
  padding: 10px;
  margin-top: 10px;
}

.collect-icon {
  width: 20px;
  height: 20px;
}

/* ... 之后的样式 ... */
.view-details{
  padding: 10 20px;
  border: none;
  background-color: white;
  color: black;
  font-size: 16px;
  font: bold;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.upload-button {
  padding: 10 20px;
  border: none;
  background-color: #5cb85c;
  color: white;
  font-size: 16px;
  font: bold;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.upload-button:hover {
  background-color: #449d44;
}

.button-text {
  transition: opacity 0.3s;
}

.button-text:first-child {
  position: absolute;
  top: 0;
  left: 0;
  opacity:1;
  transition-delay: 0.3s;
}

.button-text:last-child {
  position: absolute;
  top: 0;
  left: 0;
 opacity:0;
  transition-delay: 0.3s;
}

.upload-button .button-text:first-child {
  opacity: 0;
}

.upload-button:hover .button-text:last-child {
  opacity: 1;
}


/* 搜索行样式 */
.search-row {
  display: flex;
  
  margin-bottom: 10px; /* 添加间距 */
}

.search-input {
  /* flex: 1;  */
  height: 20px;
  margin-left: auto;
  width: 500px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.search-button {
  margin-right: auto;
  padding: 10px 20px;
  height: 40px;
  border: none;
  background-color: #337ab7;
  color: white;
  font-size: 15px;
  border-radius: 4px;
  margin-left: 10px; /* 添加间距 */
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-button:hover {
  background-color: #286090;
}

/* 排序行样式 */
.sort-row {
  display: flex;
  margin-left: 520px;
}


.sort-button {
  padding: 10px 20px;
  border: none;
  background-color: #5cb85c;
  color: white;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-right: 5px
}

.sort-button:hover {
  background-color: #449d44;
}

.sort-button img {
  width: 20px;
  height: 20px;
  vertical-align: middle; /* 垂直对齐图标和文字 */
}




</style>
